import React from 'react'
import './index.css'

export default function Footer({todoList,setTodoList}) {
  //书写以已完成逻辑
  const getCheckedNum = ()=>{
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }
  //全部选中的多选框事件
  const checedAllHandle=(e)=>{
    const expChecked= e.target.checked
    //得到一组新的数据
    const newTodoList = todoList.map((item)=>{
        return {...item,done:expChecked}
    })

    setTodoList(newTodoList)
  }
  //清除已完成任务
  const deleteAllHandle=()=>{
    setTodoList(todoList.filter(item => !item.done))
  }
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={checedAllHandle}   checked={getCheckedNum() === todoList.length && todoList.length !== 0} />
      </label>
      <span>
        <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick ={deleteAllHandle}>清除已完成任务</button>
      </div>
  )
}
